<template>
    <van-popup
    :value="value"
    position="left"
    closeable
    @click-close-icon="$emit('input',false)"
    @closed="isEdit=false"
    >
      <div class="article-channel">
          <div class="head">
            <h3>我的频道<small>点击进入频道</small></h3>
            <a class="edit" href="javascript:;"
             :class="{active:isEdit===true}"
             @click="isEdit=!isEdit">{{isEdit===true?'完成':'编辑'}}</a>
          </div>
          <div class="body">
            <a href="javascript:;"
            v-for="(item,index) in myChannels" :key="item.id"
            :class="{active:activeChannelIndex===index}"
            @click="enterChannel(index)"
            >{{item.name}}
            <geek-icon @click.native.stop="delChannel(item.id)" v-if="isEdit&&activeChannelIndex!==index&&index!==0" name="tag-close"></geek-icon>
            </a>
          </div>
          <div class="head" style="margin-top:12px">
            <h3>频道推荐</h3>
          </div>
          <div class="body">
            <a @click="addChannel(item)" href="javascript:;" v-for="item in optionChannel" :key="item.id">+ {{item.name}}
            </a>
          </div>
    </div>
    </van-popup>
</template>
<script>
import { getAllChannel, addChannel, delChannel } from '@/api/channel'
export default {
  name: 'ArticleChannel',
  props: {
    // 弹出层的显示与隐藏
    value: {
      type: Boolean,
      default: false
    },
    // 渲染我的频道
    myChannels: {
      type: Array,
      default: () => []
    },
    // 得到激活频道的id
    activeChannelIndex: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      // 所有频道
      allChannels: [],
      // 是否显示删除按钮
      isEdit: false
    }
  },
  computed: {
    // 可选频道
    optionChannel () {
      // 遍历所有频道,根据频道id去我的频道查找,如果有则排除,如果没有则返回
      return this.allChannels.filter(item => !this.myChannels.find(mc => mc.id === item.id))
    }
  },
  async created () {
    // 获取所有频道列表
    const [, res] = await getAllChannel()
    this.allChannels = res.data.data.channels
  },
  methods: {
    // 进入频道
    enterChannel (index) {
      // 关闭弹出层
      this.$emit('input', false)
      // 将点击的频道id传递给父组件,跳转到相应的频道列表
      this.$emit('update:activeChannelIndex', index)
    },
    // 添加频道
    async addChannel (item) {
      // 准备数据id name seq
      const newChannels = this.myChannels.map((item, index) => {
        return { id: item.id, name: item.name, seq: index + 1 }
      })
      newChannels.push({ ...item, seq: newChannels.length + 1 })
      // console.log(newChannels)
      // 发请求
      await addChannel(newChannels)
      // 添加到我的频道中
      this.myChannels.push(item)
    },
    // 删除频道
    async delChannel (channelId) {
      // 发送请求
      await delChannel(channelId)
      // 获取到频道id对应的索引
      const index = this.myChannels.findIndex(item => item.id === channelId)
      // 删除
      // 判断删除的id是否在当前激活id前面 --添加的
      if (index < this.activeChannelIndex) {
        this.$emit('update:activeChannelIndex', this.activeChannelIndex - 1)
      }
      this.myChannels.splice(index, 1)
    }
  }
}
</script>
<style scoped lang="less">
.van-popup {
  width: 100%;
  height: 100%;
  ::v-deep .van-popup__close-icon {
    font-size: 20px;
    right: 12px;
    top: 12px;
  }
}
// 我的频道组件
.article-channel {
  margin-top: 44px;
  .head {
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    justify-items: center;
    padding-bottom: 12px;
    h3 {
      font-size: 16px;
      color: #333;
      margin: 0;
      small {
        font-size: 12px;
        color: #999;
        margin-left: 10px;
      }
    }
    .edit {
      float: right;
      height: 22px;
      width: 52px;
      line-height: 22px;
      text-align: center;
      color: #DE644B;
      border-radius: 11px;
      border: 1px solid #DE644B;
      font-size: 12px;
      &.active {
        color: #fff;
        background: #DE644B;
      }
    }
  }
  .body {
    padding: 0 6px 0 16px;
    a {
      position: relative;
     .geek-icon {
       position: absolute;
       top: -1px;
       right: -3px;
       line-height: 1;
     }
      display: inline-block;
      padding: 0 8px;
      font-size:14px;
      color: #3A3948;
      background: #F7F8FA;
      height: 36px;
      line-height: 36px;
      min-width: 78px;
      margin-right: 10px;
      margin-bottom: 12px;
      border-radius: 18px;
      text-align: center;
      &.active {
        color: @geek-color;
      }
    }
  }
}
</style>
